<template>
  <div class="processes-management-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <SelectBlock
            :allowClear="true"
            v-model="conditions.orgCode"
            @change="blockChange($event)"
          ></SelectBlock>
          <a-select
            v-model="conditions.unitWorks"
            allowClear
            placeholder="请选择单位工程"
            :loading="unitWorksLoading"
            @change="search()"
          >
            <a-select-option
              :value="item"
              v-for="(item, index) in unitWorksSource"
              :key="index"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <!-- nav统计统计 -->
    <div class="nav" v-loading="numberLoading">
      <a-row :gutter="0">
        <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" :xxl="4" :xxxl="4">
          <div class="nav-item">
            <div class="title">单位工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberResult.unitWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberResult.unitWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" :xxl="4" :xxxl="4">
          <div class="nav-item">
            <div class="title">分部工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberResult.divisionalWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberResult.divisionalWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" :xxl="4" :xxxl="4">
          <div class="nav-item">
            <div class="title">子分部工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberResult.subDivisionalWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberResult.subDivisionalWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" :xxl="4" :xxxl="4">
          <div class="nav-item">
            <div class="title">分项工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberResult.itemWorksComplete || 0
              }}</span
              ><span class="total">/{{ numberResult.itemWorksNumber }}</span>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" :xxl="4" :xxxl="4">
          <div class="nav-item">
            <div class="title">子分项工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberResult.subItemWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberResult.subItemWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" :xxl="4" :xxxl="4">
          <div class="nav-item">
            <div class="title">工序已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberResult.procedureItemComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberResult.procedureItemNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="summary">
      今日报验数量：{{ toDay.inspectionTodayNumber || 0 }} 今日审批数量：{{
        toDay.approvalTodayNumber || 0
      }}
    </div>
    <!-- 卡片布局 -->
    <div class="card-container">
      <div class="main" v-loading="tableLoading">
        <a-empty v-if="tableData.length == 0" />
        <a-row v-else :gutter="0">
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="6"
            :xxxl="6"
            :key="index"
            v-for="(item, index) in tableData"
            @click="gotoDetail(item)"
          >
            <div class="card-item">
              <div class="title">
                <div :class="[checkStatusClass(item.progressStatus), 'state']">
                  {{ item.progressStatus || "--" }}
                </div>
                <div class="text">{{ item.unitWords || "--" }}</div>
              </div>
              <div class="chart-container">
                <div class="dom" :id="'chart_dom_' + index"></div>
                <div class="sideBar">
                  <div class="sideBar-item">
                    <div class="label">单位工程</div>
                    <div class="value">
                      <span>{{ item.unitWorksComplete || 0 }}</span
                      >/{{ item.unitWorksNumber || 0 }}
                    </div>
                  </div>
                  <div class="sideBar-item">
                    <div class="label">分部工程</div>
                    <div class="value">
                      <span>{{ item.divisionalWorksComplete || 0 }}</span
                      >/{{ item.divisionalWorksNumber || 0 }}
                    </div>
                  </div>
                  <div
                    class="sideBar-item"
                    v-if="item.subDivisionalWorksNumber > 0"
                  >
                    <div class="label">子分部工程</div>
                    <div class="value">
                      <span>{{ item.subDivisionalWorksComplete || 0 }}</span
                      >/{{ item.subDivisionalWorksNumber || 0 }}
                    </div>
                  </div>
                  <div class="sideBar-item">
                    <div class="label">分项工程</div>
                    <div class="value">
                      <span>{{ item.itemWorksComplete || 0 }}</span
                      >/{{ item.itemWorksNumber || 0 }}
                    </div>
                  </div>
                  <div class="sideBar-item" v-if="item.subItemWorksNumber > 0">
                    <div class="label">子分项工程</div>
                    <div class="value">
                      <span>{{ item.subItemWorksComplete || 0 }}</span
                      >/{{ item.subItemWorksNumber || 0 }}
                    </div>
                  </div>
                  <div class="sideBar-item">
                    <div class="label">工序</div>
                    <div class="value">
                      <span>{{ item.procedureItemComplete || 0 }}</span
                      >/{{ item.procedureItemNumber || 0 }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import SelectBlock from "@/components/wisdom-beam/SelectBlock";
import {
  getUnitWorksSelect,
  getQuantityStatistics,
  getTodayNumebr,
  getUnitWordList,
} from "@/api/wisdom-beam/quality-app";
export default {
  components: {
    SelectBlock,
  },
  data() {
    return {
      conditions: {
        //标段
        orgCode: undefined,
        //单位工程
        unitWorks: undefined,
      },
      //单位工程
      unitWorksSource: [],
      unitWorksLoading: false,
      //完成数量
      numberResult: {},
      numberLoading: false,
      //今日报验审批数量
      toDay: {},
      //卡片
      tableData: [],
      tableLoading: false,
    };
  },
  mounted() {},
  methods: {
    //监听标段切换
    blockChange() {
      this.getData();
    },
    //查询
    search() {
      this.getTableData();
      this.getNumberStatistics();
      this.getToDay();
    },

    //查询页面所有数据
    getData() {
      Promise.all([
        this.getUnitWorksList(),
        this.getNumberStatistics(),
        this.getToDay(),
        this.getTableData(),
      ])
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {});
    },
    //查询单位工程【下拉框】
    getUnitWorksList() {
      this.unitWorksLoading = true;
      let { orgCode } = this.conditions;
      return new Promise((resolve, reject) => {
        getUnitWorksSelect({ orgCode: orgCode?.key || "" })
          .then((res) => {
            let { data } = res;
            this.unitWorksSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.unitWorksSource = [];
            reject();
          })
          .finally((_) => {
            this.unitWorksLoading = false;
          });
      });
    },

    //查询头部统计
    getNumberStatistics() {
      this.numberLoading = true;
      let { orgCode, unitWorks = "" } = this.conditions;
      return new Promise((resolve, reject) => {
        getQuantityStatistics({
          orgCode: orgCode?.key || "",
          unitWorks,
        })
          .then((res) => {
            let { data } = res;
            this.numberResult = data?.result || {};
            resolve();
          })
          .catch((_) => {
            this.numberResult = {};
            reject();
          })
          .finally((_) => {
            this.numberLoading = false;
          });
      });
    },
    //查询今日数量
    getToDay() {
      let { orgCode, unitWorks = "" } = this.conditions;
      return new Promise((resolve, reject) => {
        getTodayNumebr({
          orgCode: orgCode?.key || "",
          unitWorks,
        })
          .then((res) => {
            let { data } = res;
            this.toDay = data?.result || {};
            resolve();
          })
          .catch((_) => {
            this.toDay = {};
            reject();
          })
          .finally((_) => {});
      });
    },

    //查询列表
    getTableData() {
      this.tableLoading = true;
      let { orgCode, unitWorks = "" } = this.conditions;
      return new Promise((resolve, reject) => {
        getUnitWordList({
          orgCode: orgCode?.key || "",
          unitWorks,
        })
          .then((res) => {
            let { data } = res;
            this.tableData = data?.result || [];
            this.tableData.forEach((v, i) => {
              let colorList = [];
              if (v?.progressStatus.indexOf("进行") != -1) {
                colorList = ["#FF993F", "#EEEDEB"];
              } else if (v?.progressStatus.indexOf("完成") != -1) {
                colorList = ["#42C596", "#EEEDEB"];
              } else {
                colorList = ["#EEEDEB", "#EEEDEB"];
              }
              this.$nextTick((_) => {
                setTimeout(() => {
                  this.getInitEchart(
                    "chart_dom_" + i,
                    Number(v?.progressRatio || 0),
                    colorList
                  );
                }, 300);
              });
            });
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          })
          .finally((_) => {
            this.tableLoading = false;
          });
      });
    },

    //详情
    gotoDetail(row) {
      let { orgCode } = this.conditions;
      let { unitWords } = row;
      this.$router.push({
        path: "/nebula/wisdom-beam-app/procedure/detail",
        query: {
          orgCode: orgCode?.key || "",
          unitWorks: unitWords,
        },
      });
    },

    //加载Echarts图表
    getInitEchart(id, ratio = 0, colorList) {
      this.$nextTick(() => {
        let chartInstance = this.$echarts.init(document.getElementById(id));
        let baseOpt = {
          series: [
            {
              name: "报验进度",
              type: "pie",
              radius: ["65%", "80%"],
              clockwise: false,
              avoidLabelOverlap: false,
              hoverOffset: 0,
              silent: true,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                normal: {
                  show: true,
                  position: "center",
                  formatter: () => {
                    return `{value|${ratio}%}\n {name|报验进度}`;
                  },
                  rich: {
                    value: {
                      fontWeight: "bold",
                      fontSize: 24,
                      color: "#333333",
                    },
                    name: {
                      fontWeight: 400,
                      fontSize: 14,
                      color: "#8A9295",
                    },
                  },
                },
              },

              data: [
                { value: ratio, name: "-" },
                { value: 100 - ratio, name: "-" },
              ],
            },
          ],
        };
        chartInstance.setOption(baseOpt);
      });
    },
    //检验状态类名
    checkStatusClass(status) {
      switch (status) {
        case "进行中":
          return "warning";

        case "已完成":
          return "normal";

        default:
          return "default";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.processes-management-container {
  box-sizing: border-box;
  height: 100%;
  .flex();
  flex-direction: column;
  padding: 0 0 10px 10px;
  overflow: hidden;
  .nav {
    margin: 10px 0px 0 0;
    min-height: 104px;
    background: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px 0px 10px;
    .nav-item {
      padding-left: 30px;
      overflow: hidden;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 38px;
        background: #ededed;
        transform: translateY(-50%);
      }
    }
    /deep/.ant-row {
      .ant-col:last-child {
        .nav-item::after {
          display: none;
        }
      }
    }
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .completed {
      font-size: 36px;
      font-family: D-DIN;
      font-weight: bold;
      color: #3a5b99;
    }
    .total {
      font-size: 24px;
      font-family: D-DIN;
      font-weight: bold;
      color: #999da5;
    }
  }
  .summary {
    margin: 20px 10px 20px 0;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: var(--primary-color);
  }
  .card-container {
    flex: 1;
    .flex();
    flex-direction: column;
    overflow: hidden;
    .main {
      flex: 1;
      height: 100%;
      .custom-scrollbar();
      .card-item {
        cursor: pointer;
        .flex();
        flex-direction: column;
        height: 252px;
        background: #ffffff;
        border-radius: 4px;
        margin: 0 14px 14px 0px;
        box-sizing: border-box;
        .title {
          .flex();
          align-items: center;
          margin: 20px 20px 10px 20px;
          .state {
            margin-right: 10px;
            width: 48px;
            height: 24px;
            border-radius: 4px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            .flex();
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            &.normal {
              background: #42c596;
            }
            &.warning {
              background: #ff993f;
            }
            &.default {
              background: #e9ecf3;
              color: #4c495b;
            }
          }
          .text {
            flex: 1;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #4c495b;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .chart-container {
          flex: 1;
          .flex();
          overflow: hidden;
          .dom {
            height: 100%;
            width: 200px;
          }
          .sideBar {
            flex: 1;
            box-sizing: border-box;
            padding: 0px 20px 0px 0px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #8a9295;
            .sideBar-item {
              margin-bottom: 10px;
              .flex();
              justify-content: space-between;
              .label {
                flex-shrink: 0;
              }
              .value {
                flex-shrink: 0;
                > span {
                  color: var(--primary-color);
                }
              }
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
        &:hover {
          box-shadow: 0px 16px 23px 1px rgba(55, 89, 160, 0.15);
        }
      }
    }
    .pager-container {
      flex-shrink: 0;
      .vxe-pager {
        background-color: unset;
      }
    }
  }
}
</style>
